<template>
  <div id="app">
    <div class="container">
        <div class="close"><span class="iconfont iconicon-test"></span></div>
        <div class="logo"><span class="iconfont iconnew"></span></div>
       <div class="inputs">
           <van-form ref="form">
            <!-- <van-cell-group inset> -->
              <van-field
                v-model="user.username"
                name="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="user.password"
                :type="check?'text': 'password'"
                name="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <van-icon :name="check?'eye-o':'closed-eye'" class="abs" @click="check=!check" v-show="show"/>
          
            <!-- </van-cell-group> -->
                <p class="tips">
                    没有账号？
                    <router-link to="/register">去注册</router-link>
                </p>
          <van-button icon="star-o" round type="danger" block @click="loginFn">登录</van-button>
        </van-form>
       </div>
    </div>
</div>
    

</template>

<script>
import { login } from '@/api/user'
export default {
    data(){
        return{
            user:{
                username:'',
                password:''
            },
            check:false,
            show:false,
        }
    },
    methods:{
        loginFn(){
            this.$refs.form.validate().then(()=>{
                 login(this.user).then(res=>{
                if(res.data.message==="用户不存在"){
                    this.$toast.fail(res.data.message)
                }else{
                    this.$toast.success(res.data.message)
                    
                    localStorage.setItem('Token',res.data.data.token)
                    localStorage.setItem('Account',res.data.data.user.id)

                    this.$router.push({
                        path:'/personal'
                    })
                }
              })
            }).catch(err=>{
                this.$toast.fail(`${err[0].message}`)
            })
        }
    },
    watch:{
            user:{
                deep:true,
                handler(newVal,oldVal){
                    if(newVal.password){
                        this.show=true
                    }else{
                        this.show=false
                    }
                }
            }
        }
}
</script>

<style lang="less" scoped>
.van-form{
    position: relative;
}
.abs{
    position: absolute;
    top: 60px;
    left: 290px;
}
.van-field::after{
    border-color: #666;
}
.container {
    padding: 20px;
}
.close {
    span {
        font-size:(27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
.van-field__label{
    margin-right: -20px !important
}
/deep/ .van-field--error .van-field__control, /deep/ .van-field--error .van-field__control::placeholder {
   color: rgba(102, 102, 102, 0.379);
}
</style>
